<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google文本切换</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <!--
        链接：https://www.google.com/chrome/    
        TODO:初始加载会执行动画
    -->
    <div class=" card card card--inactive" onClick="active()">

        <div id="card_box" class="card-cover card-cover--interactive  card-cover--inactive">

            <div class="card-cover__text-wrapper">
                <h2 class="chr-eyebrow">
                    SAFETY CHECK
                </h2>
                <h3 class="chr-headline-2">

                    Check your safety level in real time with just one click.

                </h3>
            </div>

        </div>
        <button id="btn" class="chr-action-icon--light card_btn card_btn_style  active_none">
            <svg class="chr-action-icon__icon">
                <use xlink:href="#plus"></use>
            </svg>
        </button>
        <!--
            展示内容
        -->
        <div id="chr-active" class="card_box 
            card--interactive 
            card_box--interactive 
            card_box--inactive">
            <!--图片-->
            <div class="card-back__image-wrapper">
                <img src="./img/safety-check-2x.webp">
            </div>
            <!--内容-->
            <div class="card-back__text-wrapper">

                <p class="chr-copy-xl card-back__body">
                    Chrome's Safety Check confirms the overall security and privacy of your browsing experience,
                    including your saved passwords, extensions, and settings. If something needs attention, Chrome will
                    help you fix it.</p>
            </div>

        </div>
    </div>
    <!--
        准备图标
    -->
    <svg class="svg-assets" xmlns="http://www.w3.org/2000/svg">
        <symbol viewBox="0 0 32 32" id="plus" xmlns="http://www.w3.org/2000/svg">
            <path d="M25.333 17.333h-8v8h-2.666v-8h-8v-2.666h8v-8h2.666v8h8v2.666Z" />
        </symbol>
        <symbol id="plus-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M24 17.3333H17.3333V24C17.3333 24.7333 16.7333 25.3333 16 25.3333C15.2667 25.3333 14.6667 24.7333 14.6667 24V17.3333H7.99999C7.26666 17.3333 6.66666 16.7333 6.66666 16C6.66666 15.2667 7.26666 14.6667 7.99999 14.6667H14.6667V7.99999C14.6667 7.26666 15.2667 6.66666 16 6.66666C16.7333 6.66666 17.3333 7.26666 17.3333 7.99999V14.6667H24C24.7333 14.6667 25.3333 15.2667 25.3333 16C25.3333 16.7333 24.7333 17.3333 24 17.3333Z">
            </path>
        </symbol>
    </svg>

    <script>
        const toggleClass = (el, class1, class2) => {
            if (el.classList.contains(class1)) {
                el.classList.remove(class1);
                el.classList.add(class2);
            } else {
                el.classList.remove(class2);
                el.classList.add(class1);
            }
        };

        const active = () => {
            // 获取需要修改的 div 元素
            var cardBox = document.getElementById('card_box');

            // 切换类名
            toggleClass(cardBox, 'card-cover--inactive', 'card-cover--active');

            var cardBox = document.getElementById('btn');

            // 切换类名
            toggleClass(cardBox, 'active_none', 'active');


            // 获取需要修改的 div 元素
            var chrActive = document.getElementById('chr-active');

            // 切换类名
            toggleClass(chrActive, 'card_box--active', 'card_box--inactive');
        };
    </script>

</body>

</html>